<!--用户列表-->
<template>
    <div class="user-root">
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入用户名称" clearable @input="getUserList"></el-input>
            </el-form-item>
            <el-form-item label="用户账号" prop="account">
                <el-input v-model="form.account" placeholder="请输入用户账号" clearable  @input="getUserList"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" prop="roleId">
                <el-select v-model="form.roleId" placeholder="请选择" @change="getUserList">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"  @click="getUserList">查询</el-button>
                <el-button  @click="resetForm('queryRef')">重置</el-button>
                <el-button type="success"  icon="el-icon-plus" @click="handleAdd">添加用户</el-button>
            </el-form-item>
        </el-form> <!--// 条件搜索表单-->

        <!--系统用户列表-->
        <el-table
                :data="userList"
                style="width: 100%"
                height="540">
            <el-table-column fixed label="" type="selection" width="55"></el-table-column>
            <el-table-column prop="userId" label="用户ID" width="190" show-overflow-tooltip></el-table-column>
            <el-table-column prop="userName" label="用户名称" width="120"></el-table-column>
            <el-table-column prop="account" label="账号" width="120"></el-table-column>
            <el-table-column prop="roleName" label="角色" width="120"></el-table-column>
            <el-table-column
                    label="操作"
                    width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleDetail(scope.$index, scope.row)" icon="el-icon-document">查看</el-button>
                    <!--删除确认框-->
                    <el-popconfirm title="确认删除吗?"
                                   @confirm="handleDelete(scope.$index, scope.row)"
                                   style="margin-left: 10px">
                        <!--删除按钮-->
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table><!--/ 系统用户列表-->

        <!--分页插件-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParam.pageNum"
                    :page-sizes="pageParam.sizes"
                    :page-size="pageParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParam.total">
            </el-pagination>
        </div><!--/ 分页插件-->

        <!--用户详情组件-->
        <UserDetail v-if="detailFlag" :user="userDTO" :role-list="options" @close="handleDetail"></UserDetail>

        <!--添加用户组件-->
        <UserAdd v-if="addUserFlag" :role-list="options" @close="handleAdd"></UserAdd>
    </div>
</template>

<script>
import API from '@/api/api';
import UserDetail from "../../../components/userList/UserDetail";
import UserAdd from "../../../components/userList/UserAdd";
import {RoleEnum} from "../../../common/RoleEnum";
export default {
    name: "UserList",
    components: {
        UserDetail, UserAdd,
    },
    data() {
        return {
            // 用户详情标志位
            detailFlag: false,
            // 添加用户标志位
            addUserFlag: false,
            //
            form: {},
            // 角色下拉列表
            options: [],
            // 系统用户列表
            userList: [],
            // 用于组件间数据传输
            userDTO: {},
            // 分页参数
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                sizes: [5, 10, 50, 100, 200],
            },
        }
    },
    mounted() {
        this.getRoleList();
        this.getUserList();

    },
    methods: {
        // 角色列表查询
        getRoleList() {
            let url = API.sysRole.roleList;
            // let param = JSON.parse(JSON.stringify(this.form));
            this.$post(url, {}).then( res => {
                let data = res.data;
                if (data.success) {
                    this.options = data.data.list;
                    this.options.map( item => {
                        item.label = item.roleName;
                        item.value = item.roleId;
                    })
                }
            })
        },
        // 系统用户查询
        getUserList() {
            let url = API.sysUser.userList;
            let param = {param: {}};
            param.param = JSON.parse(JSON.stringify(this.form));
            param.pageNum = this.pageParam.pageNum;
            param.pageSize = this.pageParam.pageSize;
            this.$post(url, param).then( res => {
                let data = res.data;
                if ( data.success ){
                    this.userList = data.data.list;
                    this.pageParam.total = data.data.total;
                } else {
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    });
                }
            }).catch( err => {
                this.$message.error({
                    showClose: true,
                    message: "请求失败!"
                });
            })
        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
            this.pageParam.pageNum = 1;
            this.pageParam.pageSize = 10;
            this.getUserList();
        },
        // 添加系统用户
        handleAdd() {
            this.addUserFlag = !this.addUserFlag;
            if (!this.addUserFlag) {
                this.getUserList();
            }
        },
        // 查看
        handleDetail(index, row) {
            console.log(row, "查看row------------=-=-=");
            this.detailFlag = !this.detailFlag;
            this.userDTO = row;
            if (!this.detailFlag) {
                this.getUserList();
            }
        },
        // 删除
        handleDelete(index, row) {
            // 只有管理员能删除店长
            if (row.roleId === RoleEnum.STORE_MANAGER) {
                this.$message.closeAll();
                this.$message.warning({
                    showClose: true,
                    message: "请联系管理员删除默认用户"
                });
                return;
            }
            // 只有管理员能删除默认用户
            if (row.isDefault === 1 && !this.$hasAdmin) {
                this.$message.closeAll();
                this.$message.warning({
                    showClose: true,
                    message: "请联系管理员删除默认用户"
                });
                return;
            }
            let url = API.sysUser.delete;
            // let param = {userList: []};
            // param.userList.push(row);
          let param = row;
            this.$post(url, param).then( res => {
                let data = res.data;
                if ( data.success ){
                    this.$message.success({
                        showClose: true,
                        message: data.msg
                    });
                    this.getUserList();
                } else {
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    });
                }
            }).catch( err => {
                this.$message.error({
                    showClose: true,
                    message: "请求失败!"
                });
            })
        },
        // 分页
        handleSizeChange(val) {
            this.pageParam.pageSize = val;
            this.getUserList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageParam.pageNum = val;
            this.getUserList();
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>

</style>
